<!-- 通知-->
<template>
  <div class="index-container">
    <div class="header-box">
      <TabsList
        :tabsList="tabsList"
        :activeItem="active"
        @click="OnTabsChange"
      />
      <Avater></Avater>
    </div>
    <div class="activity-main">
      <van-list
        v-model:loading="loading"
        finished-text="没有更多了"
        :finished="finished"
        :immediate-check="true"
        @load="onLoad"
      >
        <template v-for="item in informList" :key="item.id">
          <InformItem :itemData="item" />
        </template>
      </van-list>
    </div>
  </div>
</template>
<script setup>
import { computed, reactive, toRefs, ref, onMounted } from "vue";
import { useRoute } from "vue-router";
import InformItem from "@/components/inforItem/index.vue";
import icon_hand3 from "@/assets/image/icon_hand3.png";

import { GetInformList } from "@/api/common.js";

const route = useRoute();

const state = reactive({
  icon_hand3,
  tabsList: [
    {
      id: 1,
      name: "系统通知",
    },
  ],
  page: 1,
  size: 8,
  total: 0,
});

const { tabsList, labelsColor } = toRefs(state);

let active = ref(1);

const OnTabsChange = (ev) => {
  active.value = ev;
  console.log(ev, 11);
};

let loading = ref(false);
let finished = ref(false);
let informList = ref([]);
const getInformData = async () => {
  let { page, size } = state;
  let params = {
    page,
    size,
  };
  loading.value = true;
  let { data } = await GetInformList(params);
  informList.value = informList.value.concat(data.list);
  state.total = data.pagination.total;
  loading.value = false;
  if (informList.value.length == data.pagination.total) {
    finished.value = true;
  }
};

const onLoad = () => {
  if (informList.value.length < state.total && state.total != 0) {
    state.page++;
    getInformData();
  }
};

onMounted(() => {
  getInformData();
});
</script>



<style lang="scss" scoped>
.header-box {
  display: flex;
}
</style>
